<script setup>
import { ref, watch } from "vue";
import { useMouseInElement } from "@vueuse/core";

defineProps({
    imageList:{
        type: Array,
        default: () =>[]
    }
})

/* const imageList = [
  "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
  "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
  "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
  "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
  "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg",
];
 */
//小图切换大图
const activeIndex = ref(0);
const handelIndex = (i) => {
  activeIndex.value = i;
};

//滑块控制
const left = ref(0);
const top = ref(0);
const positionX = ref(0);
const positionY = ref(0);
const target = ref(null);
const hide = ref(true);
const { elementX, elementY, isOutside } = useMouseInElement(target);
watch([elementX, elementY], () => {
    hide.value = isOutside.value;
    if(isOutside.value)return
  if (elementX.value > 100 && elementX.value < 300)
    left.value = elementX.value - 100;
  if (elementY.value > 100 && elementY.value < 300)
    top.value = elementY.value - 100;
  if (elementX.value < 100) left.value = 0;
  if (elementY.value < 100) top.value = 0;
  if (elementX.value > 300) left.value = 200;
  if (elementY.value > 300) top.value = 200;
  positionX.value = -left.value * 2;
  positionY.value = -top.value * 2;
  
});
</script>

<template>
  <div
    class="goods-imgContainer"
    style="display: flex; height: 100%; padding: 20px"
  >
    <div ref="target" class="bigImg" style="position: relative">
      <img :src="imageList[activeIndex]" />
      <div
        v-show="!hide"
        class="layer"
        :style="{ left: `${left}px`, top: `${top}px` }"
      ></div>
    </div>
    <div
      class="large"
      v-show="!hide"
      :style="[
        {
          backgroundImage: `url(${imageList[activeIndex]})`,
          backgroundPositionX: `${positionX}px`,
          backgroundPositionY: `${positionY}px`,
        },
      ]"
    ></div>
    <div class="imgList" style="margin-left: 10px; height: 100%">
      <div
        style="height: 20%; padding: 5px"
        v-for="(img, i) in imageList"
        :key="img"
        class="imgItem"
      >
        <img
          class="img"
          :src="img"
          @mouseenter="handelIndex(i)"
          :class="{ active: i === activeIndex }"
        />
      </div>
    </div>
  </div>
</template>


<style>
.layer {
  background-color: rgba(0, 0, 0, 0.5);
  width: 200px;
  height: 200px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明白色 */
  border: 1px solid #ccc;
  pointer-events: none; /* 允许鼠标事件穿透 */
}
.img:hover {
  border: 2px solid #27ba9b;
}
.active {
  border: 2px solid #27ba9b;
}
.large {
  position: absolute;
  top: 230px;
  left: 700px;
  width: 400px;
  height: 400px;
  z-index: 500;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-repeat: no-repeat;
  background-size: 800px 800px;
  background-color: #f8f8f8;
}
</style>